<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <header th:replace="header::html"></header>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span style="color: red">*</span>员工名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="empName"  name="empName" required placeholder="请输入员工名称" lay-verify="empName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>员工号码</label>
                    <div class="layui-input-block">
                        <input type="text" id="phoneNumber"  name="phoneNumber" required placeholder="请输入员工号码" lay-verify="phoneNumber" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>入职日期</label>
                    <div class="layui-input-block">
                        <input type="text" id="hireDate"  name="hireDate" required placeholder="请输入入职日期" lay-verify="hireDate" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>员工薪水</label>
                    <div class="layui-input-block">
                        <input type="text" id="salary"  name="salary" required placeholder="请输入员工薪水" lay-verify="salary" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>部门名称</label>
                    <div class="layui-input-block">
                            <select name="dept.deptCode" id="deptCode" lay-verify="required" lay-filter="emp-select">

                            </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">直属领导</label>
                    <div class="layui-input-block">
                        <input type="hidden" id="managerId" name="manager.employeeId">
                        <input type="text" id="managerName"   required placeholder="请输入经理名" lay-verify="managerId"  class="layui-input" readonly>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="emp-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script>
    layui.use(['form','jquery'],function(){
        let form = layui.form;
        let $ = layui.jquery;

        $(function () {
            $.ajax({
                url:'/api/emp/sel',
                dataType:'json',
                type:'get',
                success:function(result){
                    $('#deptCode').append(new Option("","-----请选择-----"))
                    $.each(result.data,function(index,item){
                        $('#deptCode').append(new Option(item.deptName,item.deptCode));//往下拉菜单里添加元素
                    })
                    //菜单渲染 把内容加载进去
                    form.render();
                }
            })
        });

        form.on("select(emp-select)",function (data) {
            $.ajax({
                url:'/api/emp/selManager?deptCode='+data.value,
                dataType:'json',
                type:'get',
                success:function(result){
                    $("#managerId").val(result.data.employeeId);
                    $("#managerName").val(result.data.name);
                    form.render();
                }
            })
        })

    })
</script>
<script>
</script>
</body>
</html>